<template>
  <div>

    <el-dialog
      v-model="dialogVisible"
      title="进货渠道关系变更"
      width="1100px"
      :before-close="handleClose"
    >

      <el-form
        label-position="right"
        size="small"
        label-width="120px"
      >

        <el-row>

          <el-col :span="12">
            <el-form-item label="产品名称：" />
          </el-col>

          <el-col :span="12">
            <el-form-item label="终端名称：" />
          </el-col>

        </el-row>
      </el-form>

      <el-checkbox-group v-model="checkList">
        <div>
          <el-checkbox label="1">变更产品终端价信息</el-checkbox>

          <el-form
            label-position="right"
            size="small"
            label-width="120px"
          >

            <el-row>

              <el-col :span="12">
                <el-form-item label="终端价：">
                  <el-select
                    v-model="formData.headId"
                    placeholder="请选择负责营销职员"
                    clearable
                    @change="headChange"
                  >
                    <el-option
                      v-for="item in headOptions"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="准入模式：">
                  <el-select
                    v-model="formData.headId"
                    placeholder="请选择负责营销职员"
                    clearable
                    @change="headChange"
                  >
                    <el-option
                      v-for="item in headOptions"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="市场价：">
                  <el-select
                    v-model="formData.headId"
                    placeholder="请选择负责营销职员"
                    clearable
                    @change="headChange"
                  >
                    <el-option
                      v-for="item in headOptions"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="价格编号：">
                  <el-select
                    v-model="formData.headId"
                    placeholder="请选择负责营销职员"
                    clearable
                    @change="headChange"
                  >
                    <el-option
                      v-for="item in headOptions"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>

          </el-form>
        </div>
        <div>
          <el-checkbox label="2">变更渠道客户信息</el-checkbox>

          <el-form
            label-position="right"
            size="small"
            label-width="120px"
          >

            <el-row>

              <el-col :span="12">
                <el-form-item label="营销模式：" />
              </el-col>

              <el-col :span="12">
                <el-form-item label="代理商名称：">
                  <el-select
                    v-model="formData.headId"
                    placeholder="请选择负责营销职员"
                    clearable
                    @change="headChange"
                  >
                    <el-option
                      v-for="item in headOptions"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.id"
                    />
                  </el-select>

                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="交易价：">
                  <el-select
                    v-model="formData.headId"
                    placeholder="请选择负责营销职员"
                    clearable
                    @change="headChange"
                  >
                    <el-option
                      v-for="item in headOptions"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="负责人营销职员：">
                  <el-select
                    v-model="formData.headId"
                    placeholder="请选择负责营销职员"
                    clearable
                    @change="headChange"
                  >
                    <el-option
                      v-for="item in headOptions"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>

          </el-form>
        </div>
        <div>
          <el-checkbox label="3">变更配送信息</el-checkbox>

          <el-form
            label-position="right"
            size="small"
            label-width="120px"
          >

            <el-row>

              <el-col :span="12">
                <el-form-item label="配送模式：">
                  <el-select
                    v-model="formData.headId"
                    placeholder="请选择负责营销职员"
                    clearable
                    @change="headChange"
                  >
                    <el-option
                      v-for="item in headOptions"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="选择配送商：">
                  <el-select
                    v-model="formData.headId"
                    placeholder="请选择负责营销职员"
                    clearable
                    @change="headChange"
                  >
                    <el-option
                      v-for="item in headOptions"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="配送商：">
                  <el-select
                    v-model="formData.headId"
                    placeholder="请选择负责营销职员"
                    clearable
                    @change="headChange"
                  >
                    <el-option
                      v-for="item in headOptions"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>

          </el-form>
        </div>

      </el-checkbox-group>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button
            type="primary"
            @click="dialogConfirm"
          >确定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {defineComponent, inject, onBeforeMount, reactive, toRefs,} from 'vue'

export default defineComponent({
  name: 'Index',
  setup() {
    const api = inject('api')

    var data = reactive({
      dialogVisible: false,
      checkList: [],
      formData: {},
      headOptions: [],
    })

    const handleClose = () => {
      data.dialogVisible = false
    }

    const dialogConfirm = () => {}

    const openDialog = () => {
      console.log(111111111)
      data.dialogVisible = true
    }

    // 获取负责人
    const handlHead = () => {
      api.terminal.HEAD_PEOPLE(1).then((res) => {
        if (res.code === 0) {
          data.headOptions = res.data
        }
      })
    }

    onBeforeMount(() => {
      handlHead()
    })

    return {
      ...toRefs(data),

      handleClose,
      dialogConfirm,
      openDialog,
    }
  },
})
</script>

<style scoped>
</style>
